<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>iconfont-Symbol</title>
  <script src="./font_2308986_kh55wj6z75/iconfont.js"></script> <!-- ← 会将所有定义的svg icon作为集合插入到body最前面 -->
  <style>
    .icon {
      /* svg 只能通过设置width和height来调整大小.  font-size做不到 */
      width: 1em;
      height: 1em;
    }
  </style>
</head>

<body>


<!--
它的英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图形；

>注意 该方式 和 Unicode以及Font class方式中 引入.svg 字体文件 不是一回事

svg矢量图库官网:
• 阿里巴巴矢量图标库官网  https://www.iconfont.cn/
• iconmoon图标库官网      https://icomoon.io/#home
原理: 通过JS在页面中绘制出这个矢量图像(JS中存着如何绘制的方法)

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 IE9+，及现代浏览器。
• 浏览器渲染 SVG 的性能一般，还不如 png。
-->

<svg class="icon" aria-hidden="true">
  <!--
    icon-yuanbao 就是你通过js引入的svg集合里 你要使用的那个svg的id(symbol id)
  -->
  <use xlink:href="#icon-yuanbao"></use>
</svg>

<!--
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性
-->
</body>

</html>
